<template>
    <div>
        <p>test print</p>
        <div class="print-div" id="print_area">
            <p class="red">世上本没有路，走的人多了，便有了路 ---- 鲁迅</p>
            <p class="green">世上本没有路，走的人多了，便有了路 ---- 鲁迅</p>
            <p class="yellow">世上本没有路，走的人多了，便有了路 ---- 鲁迅</p>
            <p>世上本没有路，走的人多了，便有了路 ---- 鲁迅</p>
        </div>
        <button @click="printSomething">打印</button>
    </div>
</template>

<script>
    import print from "print-js"
    export default {
        name: "print",
        data(){
            return{}
        },
        methods:{
            printSomething(){
                const style = '@page {  } ' +
                        '@media print { .print-div{ padding:8px;background-color:#cccccc;line-height:12px } .red{ color:#f00} .green{color:green}' ;
                print({
                    printable: 'print_area',
                    type: 'html',
                    // style: style,// 亦可使用引入的外部css;
                    css:'./test.css',
                    scanStyles: false
                })
            }
        }
    }
</script>

<style scoped>

</style>
